@media screen and (max-width: 900px) {
  #app {
    // 头部导航条
    .header {
      > .head-more {
        display: block;
      }
      > .head-menu {
        display: none;
      }
    }
    // 主页
    > .index {
      > .main {
        .pic {
          height: 50vh;
        }
        .container {
          max-width: 670px;
          width: 90%;
          padding: 20px 0;
          margin: 0 auto;
          > .box {
            width: 100%;
            .right {
              display: none;
            }
            .left {
              width: 100%;
            }
            .selected-articles .card-body > .card-articles > li {
              width: 100%;
              border-right: 0px solid;
            }
            .all-articles .article-body {
              .body-left > div > img {
                height: 100%;
              }
              .body-right > div a > button {
                display: none;
              }
            }
          }
        }
      }
    }
    // 心情、关于、网站导航

    .body-main {
      width: 80%;
    }
    //   图册页面
    .pic .pic-main > .all-pic {
      justify-content: space-around;
      > .pic-item {
        width: calc((100% - 60px) / 2);
        margin-right: 30px;
        &:nth-child(2n) {
          margin-right: 0;
        }
      }
    }
    // 文章单页面
    > .article {
      > .main {
        .banner{
            height: 300px;
        }.container {
        padding: 20px 15px;
        > .article-body {
          width: 80%;
        }
      }
      }
    }
    // 项目界面
    .proPic {
      height: 150px;
    }
    // 关于
    .about {
      .body-main {
        width: 90%;
        padding: 10px 50px;
      }
      .banner {
        height: 150px;
      }
    }
    //   网址导航页面
    > .webs .body-main {
      width: 90%;
      padding: 50px 20px;
      > .now-actions > .actions > span:nth-child(1) {
        display: none;
      }
      > .web-list {
        width: calc((100% - 40px) / 2);
      }
    }
    // 单页文章
    > .article > .main .container > .article-body {
      width: 95%;
    }
  }
}
@media screen and (max-width: 600px) {
  #app {
    // 头部导航条
    .header {
      > .head-more {
        display: block;
      }
      > .head-menu {
        display: none;
      }
    }
    // 主页
    > .index {
      > .main {
        .pic {
          height: 50vh;
        }
        .container {
          width: 95%;
          padding: 20px 0;
          margin: 0 auto;
          > .box {
            width: 100%;
            .right {
              display: none;
            }
            .left {
              width: 100%;
              .pagination a > button {
                font-size: 12px;
              }
            }
            .selected-articles .card-body > .card-articles > li {
              width: 100%;
              flex-direction: column;
              transition: all 0.3s;
              > div {
                width: 100%;
              }
              > div:first-child {
                height: 150px;
              }
            }
            .all-articles .article-body {
              flex-direction: column;
              .body-left {
                width: 100%;
                padding-bottom: 0;
                > div {
                  height: 200px;
                  > img {
                    width: 100%;
                    height: auto;
                  }
                }
              }
              .body-right {
                width: 100%;
                > div {
                  > ul > li:nth-child(4),
                  li:nth-child(5) {
                    display: none;
                  }
                  a > button {
                    display: none;
                  }
                }
              }
            }
          }
        }
      }
    }

    //   图册页面
    .pic .pic-main > .all-pic {
      justify-content: center;
      align-items: center;
      > .pic-item {
        width: calc(100% - 60px);
        margin-right: 0;
      }
    }
    // 项目界面
    .proPic {
      height: 15vh;
    }
    // 关于
    .about {
      .banner {
        height: 15vh;
      }
    }
    //   网址导航页面
    > .webs .body-main {
      justify-content: center;
      > .web-list {
        width: calc(100% - 40px);
      }
      > .now-actions > .actions > span {
        margin: 0;
      }
    }
    // 心情、关于、网站导航

    .body-main {
      margin: 20px auto;
      padding: 10px 10px;
    }
    // 单页文章页面
    > .article >.main .container{
        padding: 20px 5px;
        > .article-body{
            width: 100%;
            > .article-content > .article-actions{
                display: flex;
            }
        }
        > .article-list{
        display: none;
    }
    } 
  }
}
